class Enlarge{
    constructor(el){//实例化对象中   目前this指实例化对象，this.el是box，
    this.el=document.querySelector(el)
    this.img=this.el.querySelector(".img")
    this.mask=this.el.querySelector(".mask")
    this.enlarge=this.el.querySelector(".enlarge")
    this.init()//只是方法的调用
    }


    init(){//原型方法=     prototype.init=值
        this.overOut()//遮罩框移动显示隐藏
        this.enlargeSetWH()//改变大图的位置
        this.maskMove()//遮罩框的移动
        this.enlargeSetBg()//大图的比例
        this.smallImgChange()//小图的比例
    }


    //1.遮罩框移动
    maskMove(){
    this.img.onmousemove=(evt)=>{
    let e=evt||window.event
    let X=e.pageX-this.el.offsetLeft-this.mask.offsetWidth/2
    let Y=e.pageY-this.el.offsetTop-this.mask.offsetHeight/2
    if(X<0) X=0
    if(Y<0) Y=0
    let maxX=this.img.offsetWidth-this.mask.offsetWidth
    let maxY=this.img.offsetHeight-this.mask.offsetHeight
    if(X>maxX) X=maxX
    if(Y>maxY) Y=maxY
    this.mask.style.left=X+"px"
    this.mask.style.top=Y+"px"
    this.enlargeSetBg(X,Y)
    }
    }

    //2.大图片设置的移动位置
    enlargeSetBg(X,Y)
    {//div.enlarge bc left =    (div.enlarge w / div.mask w) *  div.mask left
    //先算出等比例
    let enlargeW=this.enlarge.offsetWidth
    let maskW=this.mask.offsetWidth
    let data=enlargeW/maskW
    this.enlarge.style.backgroundPosition =`-${X*data}px -${Y*data}px`
    }

    //3.兼容语法，获取非行内或者行内样式
    getStyle(tagObj,cssAttr){//选择器名字，属性
    if(window.getComputedStyle){
    return getComputedStyle(tagObj)[cssAttr] 
    } else{
    return tagObj.currentStyle[cssAttr]
    }
    }

    //4.设置大图片的宽高让等比例
    enlargeSetWH(){
    //div.enlarge w = div.mask w * (div.enlarge background / div.img background )
    let  maskW=parseInt(this.getStyle(this.mask,"width"))//200
    let  maskH=parseInt(this.getStyle(this.mask,"height"))//200
    let  temp=this.getStyle(this.enlarge,"background-size")//800px 800px
    //得到一个图片宽高的数组
    let enlargeW=parseInt(temp.split(' ')[0])
    // //字符串转数组)
    let enlargeH=parseInt(temp.split(' ')[1])
    let imgW=this.img.clientWidth
    let imgH=this.img.clientHeight
    let zongW=maskW * (enlargeW/imgW)
    let zongH=maskH * (enlargeH/imgH)
    this.enlarge.style.width = zongW + "px"
    this.enlarge.style.height = zongH + "px"
    }


    //5.鼠标移入移出显示遮罩框和下面大框
    overOut(){
    this.img.onmouseover = ()=> {
    this.mask.style.display = this.enlarge.style.display="block"
    }
    this.img.onmouseout = () => {
    this.mask.style.display = this.enlarge.style.display="none"
    }
    }

    //6.小图片设置
    // 步骤1：获取所有smallImgObjs
    // 步骤2：遍历增加点击事件
    // 步骤3：在事件处理函数中（1-改bigImg，2-放大镜图）
    smallImgChange()
    {
    let liObjs=this.el.querySelectorAll("ul li ")
    liObjs.forEach((item,i)=>{
    item.onclick=()=>{//改变this指向，从点击事件变为实例化对象
    //取消原本的class，给点击的item加class
    this.el.querySelector("ul li.active").className=""
    item.className="active"
    //console.log(i);
    //改变图片地址
    this.img.style.background=`url(./imgs/${i+1}.jpg)`
    //改变放大镜的图片
    this.enlarge.style.background=`url(./imgs/${i+1}.big.jpg)`
    }})
    }
}
//export default Enlarge